<template>
  <div class="promotion-list">
    <!-- 搜索区域
    :model="searchForm"将表单数据对象 searchForm 绑定到表单组件
    -->
    <el-form inline :model="searchForm" class="search-form">
      <el-form-item label="商品名称">
        <el-input v-model="searchForm.productName" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="审批状态">
        <el-select v-model="searchForm.approveStatus" placeholder="全部">
          <el-option label="全部" value="" />
          <el-option label="未审核" value="未审核" />
          <el-option label="已审核" value="已审核" />
          <el-option label="审核不通过" value="审核不通过" />
        </el-select>
      </el-form-item>
      <el-form-item label="限时开始时间">
        <el-date-picker
            v-model="searchForm.startTime"
            type="datetime"
            placeholder="选择时间"
        />
      </el-form-item>
      <el-form-item label="希望价格生效时间">
        <el-date-picker
            v-model="searchForm.effectTime"
            type="datetime"
            placeholder="选择时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="success" @click="handleAdd">新增促销申请</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
      <el-table-column prop="id" label="序号" width="50" />
      <el-table-column prop="activityName" label="活动名称" />
      <el-table-column prop="activityBeginTime" label="促销活动开始时间" />
      <el-table-column prop="activityEndTime" label="促销活动结束时间" />
      <el-table-column prop="activityType" label="促销类型" />
      <el-table-column prop="priceBeginTime" label="促销价格开始时间" />
      <el-table-column prop="priceEndTime" label="促销价格结束时间" />
      <el-table-column prop="activityReason" label="活动情况" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="approveStatus" label="审批状态">
        <template #default="scope">
          <el-tag
              :type="
              scope.row.approveStatus === '未审核'
                ? 'warning'
                : scope.row.approveStatus === '已审核'
                ? 'success'
                : 'danger'
            "
          >
            {{ scope.row.approveStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button
              v-if="scope.row.approveStatus === '未审核' || scope.row.approveStatus === '审核不通过'"
              type="warning"
              size="small"
              @click="handleEdit(scope.row)"
          >
            修改
          </el-button>
          <el-button
              v-if="scope.row.approveStatus === '未审核' || scope.row.approveStatus === '审核不通过'"
              type="danger"
              size="small"
              @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
          <el-button type="info" size="small" @click="handleTrack(scope.row)">审核跟踪</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        style="margin-top: 10px; text-align: right"
    />
  </div>
</template>

<script setup>
import { ref, reactive,onMounted } from 'vue';



// 搜索表单
const searchForm = reactive({
  productName: '',
  approveStatus: '',
  startTime: '',
  effectTime: ''
});

// 表格数据
const tableData = ref([
  {
    index: 1,
    activityName: '10.1天翼促销',
    startTime: '2011年4月26日 09:57:53',
    promotionPrice: 45,
    effectTime: '2011年4月27日',
    approveStatus: '未审核'
  },
  {
    index: 2,
    activityName: '10.1天翼促销',
    startTime: '2011年4月26日 09:57:53',
    promotionPrice: 45,
    effectTime: '2011年4月27日',
    approveStatus: '已审核'
  },
  {
    index: 3,
    activityName: '10.1天翼促销',
    startTime: '2011年4月26日 09:57:53',
    promotionPrice: 45,
    effectTime: '2011年4月27日',
    approveStatus: '未审核'
  },
  {
    index: 4,
    activityName: '10.1天翼促销',
    startTime: '2011年4月26日 09:57:53',
    promotionPrice: 45,
    effectTime: '2011年4月27日',
    approveStatus: '未审核'
  },
  {
    index: 5,
    activityName: '10.1天翼促销',
    startTime: '2011年4月26日 09:57:53',
    promotionPrice: 45,
    effectTime: '2011年4月27日',
    approveStatus: '未审核'
  },
  {
    index: 6,
    activityName: '10.1天翼促销',
    startTime: '2011年4月26日 09:57:53',
    promotionPrice: 45,
    effectTime: '2011年4月27日',
    approveStatus: '已审核'
  },
  {
    index: 7,
    activityName: '10.1天翼促销',
    startTime: '2011年4月26日 09:57:53',
    promotionPrice: 45,
    effectTime: '2011年4月27日',
    approveStatus: '审核不通过'
  },
  {
    index: 8,
    activityName: '10.1天翼促销',
    startTime: '2011年4月26日 09:57:53',
    promotionPrice: 45,
    effectTime: '2011年4月27日',
    approveStatus: '已审核'
  },
  {
    index: 9,
    activityName: '10.1天翼促销',
    startTime: '2011年4月26日 09:57:53',
    promotionPrice: 45,
    effectTime: '2011年4月27日',
    approveStatus: '已审核'
  },
  {
    index: 10,
    activityName: '10.1天翼促销',
    startTime: '2011年4月26日 09:57:53',
    promotionPrice: 45,
    effectTime: '2011年4月27日',
    approveStatus: '已审核'
  }
]);

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 480
});

// 搜索方法
const handleSearch = () => {
  console.log('搜索条件：', searchForm);
  // 实际项目中调用接口查询数据
};

// 新增促销申请
const handleAdd = () => {
  console.log('新增促销申请');
  // 实际项目中跳转到新增页面
};

// 查看
const handleView = (row) => {
  console.log('查看', row);
  // 实际项目中跳转到详情页面
};

// 修改
const handleEdit = (row) => {
  console.log('修改', row);
  // 实际项目中跳转到编辑页面
};

// 删除
const handleDelete = (row) => {
  console.log('删除', row);
  // 实际项目中调用删除接口
};

// 审核跟踪
const handleTrack = (row) => {
  console.log('审核跟踪', row);
  // 实际项目中跳转到审核跟踪页面
};

// 分页方法
const handleSizeChange = (val) => {
  pagination.pageSize = val;
  console.log('每页条数变更为', val);
};

const handleCurrentChange = (val) => {
  pagination.currentPage = val;
  console.log('当前页变更为', val);
};
</script>

<style scoped>
.promotion-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.search-form {
  margin-bottom: 10px;
}

.el-table {
  --el-table-header-text-color: #606266;
  --el-table-row-hover-bg-color: #f5f7fa;
}

.el-tag {
  padding: 2px 6px;
  font-size: 12px;
}
</style>